<cd-modal [modalRef]="activeModal">
  <ng-container i18n="form title"
                class="modal-title">Delete Zone Group</ng-container>

  <ng-container class="modal-content">
    <form name="zonegroupForm"
          [formGroup]="zonegroupForm"
          novalidate>
      <div class="modal-body ms-4">
        <label i18n>
          This will delete your <strong>{{zonegroup?.name}}</strong> Zone Group.
        </label>
        <ng-container *ngIf="zonesList.length > 0">
          <label class="mt-3"
                 i18n>
              Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zone Group?</label>
          <ng-container *ngIf="includedPools.size > 0">
            <label i18n>
              This will delete the following:</label>
          </ng-container>
          <strong class="mt-3 mb-2 h5 block">Zones:</strong>
          <div id="scroll">
            <strong *ngFor="let zone of zonesList"
                    class="block">{{zone}}</strong>
          </div>
          <ng-container *ngIf="includedPools.size > 0">
            <strong class="mt-3 mb-2 h5 block">Pools:</strong>
            <div id="scroll"
                 class="mb-2">
              <strong *ngFor="let pool of includedPools"
                      class="block">{{ pool }}</strong>
            </div>
          </ng-container>

          <div class="form-group">
            <div class="custom-control custom-checkbox mt-2">
              <input type="checkbox"
                     class="custom-control-input"
                     name="deletePools"
                     id="deletePools"
                     formControlName="deletePools"
                     (change)="showDangerText()">
              <ng-container *ngIf="includedPools.size > 0 else noPoolsConfirmation">
                <label class="custom-control-label"
                       for="deletePools"
                       i18n>Yes, I want to delete the zones and their pools.</label>
              </ng-container>
            </div>
            <div *ngIf="displayText"
                 class="me-4">
              <cd-alert-panel type="danger"
                              i18n>
                              This will delete all the data in the pools!
              </cd-alert-panel>
            </div>
          </div>
        </ng-container>
      </div>

      <div class="modal-footer">
        <cd-form-button-panel (submitActionEvent)="submit()"
                              [form]="zonegroupForm"
                              [submitText]="actionLabels.DELETE ">
        </cd-form-button-panel>
      </div>
    </form>
  </ng-container>

</cd-modal>

<ng-template #noPoolsConfirmation>
  <label class="custom-control-label"
         for="deletePools"
         i18n>Yes, I want to delete the zones.</label>
</ng-template>
